<template>
	 <div class="navtop">
	 	<el-row class="item">
	 		<el-button 
	 			class="item-list" 
	 			v-for="(item,index) in NavList"
	 			:key="index"
	 		>
	 			<router-link :to="item.path" class="title">{{item.title}}</router-link>
	 			<span href="" class="close">x</span>
	 		</el-button>
	 		<!--<div class="item-list">
	 			<a href="" class="title">首页</a>
	 		</div>-->
	 	</el-row>
	 </div>
</template>

<script>
	export default{
		data(){
			return {
				NavList:[
				  {
				  	title:'首页',
				  	path:'/'
				  }
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	.navtop{
		background:#fff;
		z-index: 111;
		position:fixed;
		left:4.52rem;
		top:1.2rem;
		right:0;
		padding:0 .4rem;
		border-bottom:1px solid #d8dce5;;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
	}
	.navtop .item{
		display: flex;
		height:0.6rem;
		align-items: center;
		box-sizing: border-box;
	}
	.navtop .item .item-list{
		display:inline-block;
		line-height:0.4rem;
		background:#20a0ff;
		border-radius: 0.1rem;
		margin-right:.1rem;
		padding:.02rem .14rem;
		font-size:12px;
	}
	.item-list::before{
		content: '';
	    background: #fff;
	    display: inline-block;
	    width:0.16rem;
	    height:0.16rem;
	    border-radius: 50%;
	    position: relative;
	    margin-right:0.04rem;
	}
	.navtop .item .item-list .title{
		color:#fff;
	}
	.close{
		    width: 0.28rem;
		    height: 0.28rem;
		    line-height: 14px;
		    display: inline-block;
		    border-radius: 50%;
		    text-align: center;
		    transition: all 0.3s;
	 	    color:#fff; 
	 	    cursor: pointer;
	      }
	.close:hover{
		background:#ccc;
	}
</style>